/**
*
* @author zzhijie
* @date 2020-12-24
*/

<template>
  <div
    ref="previewItem"
    class="preview-item"
    :class="isInGroup?'':'border'"
    @click.stop="handleClick">
    <div class="title" v-if="!isInGroup">{{ params.title }}</div>
    <ul class="place" v-show="isActive&&!isInGroup">
      <li v-for="item in 4"></li>
    </ul>
    <div class="active" v-if="isActive&&isInGroup"></div>
    <slot></slot>
  </div>
</template>

<script>

  export default {
    name: "previewItem",
    props: {
      mainComponent: {
        type: Object,
        required: true
      },
      params: {
        type: Object,
        required: true
      },
    },
    data() {
      return {
        isPreviewItem: true,
        showFlag: false,
        current: this,
        id: Date.now(),
        isDragItem: true,
        moveFlag: false,
        width: 0,
        height: 0,
        pageX: 0,
        pageY: 0
      }
    },
    computed: {
      isActive() {
        let {activeParams=[], selectedParams=[]} = this.mainComponent;
        if (selectedParams.length) {
          return selectedParams.includes(this.params);
        } else {
          return activeParams === this.params;
        }
      },
      previewList() {
        return this.mainComponent.previewList;
      },
      isInGroup(){
        return this.hasGroup(this.$parent);
      }
    },
    methods: {
      hasGroup(parent){
        if(parent){
          if(parent.isGroup){
            return true;
          }else {
            return this.hasGroup(parent.$parent);
          }
        }
      },
      handleClick(e = {}) {
        let {shiftKey, ctrlKey} = e;
        if (shiftKey || ctrlKey) {
          if (!this.mainComponent.selectedParams.length) {
            this.addComp(this.mainComponent.activeParams);
          }
          this.addComp(this.params);
        } else {
          this.mainComponent.activeParams = this.params;
          this.mainComponent.activeTab = this.params.type;
          this.mainComponent.selectedParams = [];
          // this.$el.focus();
        }
      },
      addComp(params) {
        let index = this.mainComponent.selectedParams.findIndex(v => v === params);
        if (index > -1) {
          this.mainComponent.selectedParams.splice(index, 1);
        } else {
          this.mainComponent.selectedParams.push(params);
        }
      },
    },
    mounted() {
      this.handleClick();
    }
  }
</script>

<style lang="scss" scoped>
  .preview-item {
    position: relative;
    user-select: none;
    height: 100%;
    outline: none;

    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      //z-index: 99;
      box-sizing: border-box;
    }

    &.border::before{
      border: 1px dashed $primary;
    }

    //&:hover {
    //
    //
    //  .title {
    //    opacity: 0;
    //  }
    //
    //  .opt-box {
    //    opacity: 1;
    //    z-index: 9;
    //
    //    .el-icon-top,
    //    .el-icon-bottom {
    //      display: block;
    //    }
    //  }
    //}

    .active::before {
      border: 2px solid $primary;
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      //z-index: 99;
      box-sizing: border-box;
      //pointer-events: none;
    }

    .opt-box {
      opacity: 0;
      background: #fff;
      position: absolute;
      top: 0;
      left: 100%;
      box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.1);

      i {
        display: block;
        cursor: pointer;
        font-size: 18px;
        width: 35px;
        height: 35px;
        text-align: center;
        line-height: 35px;

        &.el-icon-top,
        &.el-icon-bottom {
          display: none;
        }

        &:not(:first-child) {
          border-top: 1px solid $bg;
        }

        &:hover {
          color: $primary;
        }

        &.disabled {
          color: #ccc;
          cursor: not-allowed;
        }
      }
    }

    .title {
      position: absolute;
      left: calc(100% + 6px);
      top: 0;
      background: #fff;
      box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.1);
      padding: 4px 10px;
      white-space: nowrap;
      border-radius: 2px;
      font-size: 12px;
      pointer-events: none;

      &::before {
        content: "";
        width: 0;
        height: 0;
        border-right: 6px solid #fff;
        border-top: 4px solid rgba(0, 0, 0, 0);
        border-bottom: 4px solid rgba(0, 0, 0, 0);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: -6px;
      }
    }

    .place {
      li {
        width: 10px;
        height: 10px;
        position: absolute;
        z-index: 99;
        pointer-events: none;

        &:nth-child(1) {
          border-top: 2px solid $primary;
          border-left: 2px solid $primary;
          top: -4px;
          left: -4px;
        }

        &:nth-child(2) {
          border-top: 2px solid $primary;
          border-right: 2px solid $primary;
          top: -4px;
          right: -4px;
        }

        &:nth-child(3) {
          border-bottom: 2px solid $primary;
          border-left: 2px solid $primary;
          bottom: -4px;
          left: -4px;
        }

        &:nth-child(4) {
          border-bottom: 2px solid $primary;
          border-right: 2px solid $primary;
          bottom: -4px;
          right: -4px;
        }
      }
    }
  }
</style>
